import { useEffect, useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import { useNavigate, Outlet } from 'react-router-dom'
import { Button, List, Image, Toast, Card, Tag, NavBar } from 'antd-mobile'
export default function MapContainer() {
    let map = null;
    let navigate = useNavigate()
    const [collectList, setcollectList] = useState(JSON.parse(localStorage.getItem('collectList')) || [])
    console.log(collectList);

    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "285ef86a1b0fb15c8cea07f39d681dd1",
        };
        AMapLoader.load({
            key: "f506322dc317807431c320e939f019d5", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {
                map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [116.397428, 39.90923], // 初始化地图中心点位置
                });
                const markerData = [
                    {
                        position: new AMap.LngLat(116.397428, 39.90923),
                        name: '活动1'
                    },
                    {
                        position: new AMap.LngLat(116.40834779866822, 39.93226036864873),
                        name: '活动2'
                    },
                    {
                        position: new AMap.LngLat(116.41086305409615, 39.92811073633207),
                        name: '活动3'
                    },
                    {
                        position: new AMap.LngLat(116.41488746278085, 39.92766809391907),
                        name: '活动4'
                    },
                    {
                        position: new AMap.LngLat(116.39972406577243, 39.93635442401566),
                        name: '活动5'
                    },
                ]
                markerData.forEach((item) => {
                    const marker = new AMap.Marker({
                        position: item.position,
                        label: {
                            content: item.name, //将 html 传给 content
                            offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
                        }

                    });
                    map.add(marker);
                })

            })
            .catch((e) => {
                console.log(e);
            });

        return () => {
            map?.destroy();
        };
    }, []);

    return (
        <div>
            <NavBar onBack={() => navigate('/search')}>
                附近定位
            </NavBar>
            <div
                id="container"
                style={{ height: "300px" }}
            ></div>
            <List header='活动列表'>
                {collectList.length>0 &&collectList.map((item,ind) => (
                    <List.Item
                        key={ind}
                        prefix={
                            <Image
                                src={item.image}
                                style={{ borderRadius: 20 }}
                                fit='cover'
                                width={150}
                                height={150}
                            />
                        }
                        description={<div>
                           {item.date}
                        </div>}
                    >
                        {item.title}
                         <p>价格￥{item.price}</p>
                    </List.Item>
                ))}
            </List>


        </div>


    );
}
